<template>
    <div id="checkStage">
        <h1>验收回执单</h1>
        <el-upload :action="VUE_APP_BASE_API + '/stageCheck/upload'" drag :headers="{ Authorization: 'Bearer ' + token }"
            list-type="picture-card" :data="{ projectId: projectInfo.projectId }" ref="fileUpload" :file-list="fileList"
            :on-success="success" :before-upload="beforeAvatarUpload">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
                <img v-if="isImage(file.url)" class="el-upload-list__item-thumbnail" :src="file.url"
                    onerror="this.src='/error.jpeg'">
                <img v-else-if="isVideo(file.url)" class="el-upload-list__item-thumbnail" src="/video.png">
                <img v-else class="el-upload-list__item-thumbnail" src="/unknown.png">
                <span class="el-upload-list__item-actions">
                    <span v-if="isImage(file.url)" class="el-upload-list__item-preview"
                        @click="handleImageCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-else-if="isVideo(file.url)" class="el-upload-list__item-preview"
                        @click="handleVideoCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <i class="el-icon-download"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogImageVisible" width="1600px">
            <img style="max-height: 750px;max-width: 100%;" :src="dialogImageUrl" onerror="this.src='/error.jpeg'" />
        </el-dialog>
        <el-dialog :visible.sync="dialogVideoVisible" width="1600px">
            <video width="100%" style="max-height: 750px;max-width: 100%;" :src="dialogVideoUrl" controls></video>
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
    downloadApi
} from "@/api/project/file";
import {
    getStageCheckApi,
    stageCheckDelFileApi
} from "@/api/project/stageCheck";
export default {
    name: 'CheckStage',
    props: {
        projectInfo: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            token: getToken(),
            filterText: '',
            dialogImageUrl: "",
            dialogVideoUrl: "",
            dialogImageVisible: false,
            dialogVideoVisible: false,
            imglist: ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jfif', 'tif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'wmf', 'webp', 'avif', 'apng'],
            videolist: ['mp4', 'mov', 'avi', 'wmv', 'mpg', 'mpeg', 'rm', 'ram', 'swf', 'flv'],
            disabled: false,
            fileList: [],
            uploadList: []
        };
    },
    watch: {
        projectInfo(newVal, oldVal) {
            getStageCheckApi(this.projectInfo.projectId).then(response => {
                Array.from(response.data).forEach(item => {
                    this.fileList.push({ url: item })
                });
            })
        }
    },
    mounted(){
        if(this.projectInfo.projectId!=undefined){
            getStageCheckApi(this.projectInfo.projectId).then(response => {
            Array.from(response.data).forEach(item => {
                this.fileList.push({ url: item })
            });
        })
        }
    },
    methods: {
        isImage(path) {
            let type = path.split(".")[1]
            let result = this.imglist.some((item) => {
                return type == item
            })
            if (result) {
                return true
            }
            return false
        },
        isVideo(path) {
            let type = path.split(".")[1]
            let result = this.videolist.some((item) => {
                return type == item
            })
            if (result) {
                return true
            }
            return false
        },
        beforeAvatarUpload(file) {
            const isLt100M = file.size / 1024 / 1024 < 100;
            if (!isLt100M) {
                this.$message.error('上传图片大小不能超过 100MB!');
            }
            return isLt100M;
        },
        handleDownload(file) {
            downloadApi(file.url).then(response => {
                let blob = new Blob([response.data], {
                    type: response.data.type,
                });
                let fileName = response.headers["content-disposition"].split("=")[1];
                this.$download.saveAs(blob, fileName);
            })
        },
        handleRemove(file) {
            if (confirm("确认删除该文件")) {
                stageCheckDelFileApi(this.projectInfo.projectId, file.url).then(response => {
                    if (response.code == 200) {
                        const index = this.fileList.findIndex((item) => {
                            return item.uid === file.uid
                        })
                        this.fileList.splice(index, 1)
                        this.$message.success('删除成功');
                    } else {
                        this.$message.error('删除失败');
                    }
                })
            }
        },
        handleImageCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogImageVisible = true;
        },
        handleVideoCardPreview(file) {
            this.dialogVideoUrl = file.url;
            this.dialogVideoVisible = true;
        },
        success(response, file, fileList) {
            if (response.code == 200) {
                this.uploadList.splice(0, this.uploadList.length);
                Array.from(response.data).forEach(item => {
                    this.uploadList.push({ url: item })
                });
                this.uploadedSuccessfully()
            } else {
                fileList.pop();
            }
        },
        // 上传结束处理
        uploadedSuccessfully() {
            this.fileList = this.uploadList;
            this.uploadList = [];
        }
    },
};
</script>

<style lang="scss">
#checkStage {
    .el-upload--picture-card {
        border: 0px;
    }

    .el-upload-dragger {
        width: 148px;
        height: 148px;
    }

    .el-upload-list__item {
        transition: none !important;
    }

    .el-dialog__body {
        text-align: center;
    }
}
</style>